<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <card title="新增用户" num="835" icon="el-icon-user-solid" bgc="#2D8CF0"></card>
            </el-col>
            <el-col :span="4">
                <card title="累计点击" num="232" icon="el-icon-user-solid" bgc="#19BE6B"></card>
            </el-col>
            <el-col :span="4">
                <card title="新增问答" num="142" icon="el-icon-user-solid" bgc="#FF9900"></card>
            </el-col>
            <el-col :span="4">
                <card title="分享统计" num="657" icon="el-icon-user-solid" bgc="#ED3F14"></card>
            </el-col>
            <el-col :span="4">
                <card title="新增互动" num="12" icon="el-icon-user-solid" bgc="#E46CBB"></card>
            </el-col>
            <el-col :span="4">
                <card title="新增页面" num="14" icon="el-icon-user-solid" bgc="#9A66E4"></card>
            </el-col>
        </el-row>

        <div style="display: flex ;justify-content: space-between;margin-top: 35px;">
            <el-card class="box-card" style="flex: 1;margin-right: 35px">
                <histogram></histogram>
            </el-card>
            <el-card class="box-card" style="flex: 1">
                <pie></pie>
            </el-card>
        </div>

        <div>
            <el-card class="box-card" style="margin-top: 30px;">
                <polygonal></polygonal>
            </el-card>
        </div>
    </div>
</template>

<script>

    import pie from './main/chart/pie'
    import polygonal from './main/chart/polygonal'
    import histogram from './main/chart/histogram'
    import card from './main/card'

    export default {
        data() {
            return {}
        },
        components: {
            histogram,
            pie,
            polygonal,
            card,

        },

    }
</script>

<style scoped lang="scss">

</style>